<script setup lang="ts">
import { ref } from 'vue'
import useDefaultStore from '@/store/module/default'

const defaultStore = useDefaultStore()
const firstName = ref('')
function updateName() {
  defaultStore.setUpdateName(firstName.value)
  firstName.value = ''
}
</script>

<template>
  <h1>Hello,{{ defaultStore.getFullName }}!</h1>
  <label for="name-input" class="form-group">
    <h1>Update First Name:</h1>
    <input
      type="text"
      id="name-input"
      :placeholder="firstName ? '' : 'Please input your name.'"
      v-model="firstName"
    />
  </label>
  <a-button @click="updateName">Update User Name</a-button>
</template>

<style scoped lang="less">
.form-group {
  display: block;
  width: 50%;
  margin: 0 auto;

  h1 {
    display: inline;
    margin-right: 10px;
  }
}
</style>
